<template>
  <a-list
    item-layout="vertical"
    size="large"
    :pagination="pagination"
    :data-source="listData"
    :split="true"
  >
    <!-- <template #footer>
      <div>
        footer part
      </div>
    </template> -->
    <template #renderItem="{ item }">
      <a-list-item key="item.ID">
        <template #actions>
          <span v-for="{ type, text } in actions" :key="type">
            <component :is="type" style="margin-right: 10px" />
            {{ text }}
          </span>
        </template>
        <!-- <template #extra>
          <img
            width="272"
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
        </template> -->
        <a-list-item-meta :description="item.TITLE">
          <template #title>
            <a :href="item.href">{{ item.TITLE }}</a>
          </template>
          <template #avatar><a-avatar :src="item.DATA" /></template>
        </a-list-item-meta>
        {{ item.DATA }}
      </a-list-item>
    </template>
  </a-list>
</template>
<script lang="ts" setup>
import {
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, reactive } from "vue";
import servieApi from "../api/serve/servieApi";
import { BBM } from "../model/BBM_info/bbm";
import { useStore } from "../store";
import { Convertor } from "../model/BBM_info/HttpMsgConvertor";
import { plainToClass, plainToClassFromExist } from "class-transformer";
const listData: Record<string, string>[] = reactive([]);
const store = useStore();
// const queryData = () => {
const bbm = new BBM.BBM();
const table = new BBM.BBM_table();
table.name = "ARTICLE_Q";
bbm.addTable(table);
table.addColumns("USER_ID", "ENV_TYPE", "VERSION");
table.addRow(store.state.userId, store.state.envType, store.state.version);
servieApi
  .queryArticle(bbm)
  .then((resove) => {
    // console.log(resove.data);
    let bbm = new BBM.BBM();
    let a = plainToClassFromExist(bbm, resove.data);
    let table = a.getTable("BBM_TABLE_DEFAULT");
    const t = Convertor.jsonToTable(table);
    for (let i = 0; i < t.rows.length; i++) {
      listData.push({
        ID: t.getRowValue(i, "ID"),
        ARTICLE_ID: t.getRowValue(i, "ARTICLE_ID"),
        TITLE: t.getRowValue(i, "TITLE"),
        CONTENT: t.getRowValue(i, "CONTENT"),
        DATA: t.getRowValue(i, "DATA"),
      });
    }
  })
  .catch((reject) => {
    console.log(reject);
  })
  .finally(() => {
    console.log(listData);
  });
// };

const pagination = {
  onChange: (page: number) => {
    console.log(page);
  },
  pageSize: 5,
};
const actions: Record<string, string>[] = [
  { type: "StarOutLined", text: "0" },
  { type: "LikeOutlined", text: "0" },
  { type: "MessageOutlined", text: "0" },
];
</script>

